import { Component, OnInit,ViewChild } from '@angular/core';
import { InfiniteScroll } from '@ionic/angular';

@Component({
  selector: 'app-infinite-scrool',
  templateUrl: './infinite-scrool.page.html',
  styleUrls: ['./infinite-scrool.page.scss'],
})
export class InfiniteScroolPage implements OnInit {
  @ViewChild(InfiniteScroll) infiniteScroll: InfiniteScroll;
  
  data = Array.from(Array(10),(value,index)=> index);

  constructor() { }

  ngOnInit() {
  }

  loadData(event) {
    setTimeout(() => {
      console.log('Done');
      event.target.complete();

      this.data.push(...Array.from(Array(30),(value,index)=> index));
      
      // App logic to determine if all data is loaded
      // and disable the infinite scroll
      if (this.data.length == 500) {
        event.target.disabled = true;
      }
    }, 500);
  }

  toggleInfiniteScroll() {
    this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
  }

}
